<template>
  <el-dialog :visible.sync="isShow" :fullscreen="isFull" title="产品模板编辑">
    <div class="dialog-scroll" :style="{ maxHeight }">
      <el-form ref="form" :model="fields" :rules="rules" label-width="80px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="父模板:" prop="pid">
              <el-select
                v-model="fields.pid"
                size="small"
                placeholder="请选择父模板"
              >
                <el-option
                  v-for="item in forms"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="表单编号:" prop="formCode">
              <el-input
                v-model.trim="fields.formCode"
                size="small"
                placeholder="请输入表单编号"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="表单名称:" prop="name">
              <el-input
                v-model.trim="fields.name"
                size="small"
                placeholder="请输入表单名称"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="语言:" prop="language">
              <el-select v-model="fields.language" placeholder="请选择语言">
                <el-option
                  v-for="item in languages"
                  :key="item.label"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="行业分类:" prop="industry">
              <el-cascader
                style="width:100%"
                v-model="fields.industry"
                size="small"
                :options="parents"
                :props="{
                  label: 'name',
                  value: 'id',
                  children: 'childrens',
                  emitPath: false,
                }"
                clearable
                placeholder="请选择行业分类"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="表单简介:" prop="info">
              <el-input
                v-model.trim="fields.info"
                size="small"
                placeholder="请输入表单简介"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <fc-designer ref="designer"> </fc-designer>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button :loading="loading" size="mini" @click="closePage"
        >取消</el-button
      >
      <el-button
        :loading="loading"
        type="primary"
        size="mini"
        @click="onOkBtnClick"
        >保存</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import { saveOrUpdate, get, treeForm } from '@/api/form'
import { getDic } from '@/utils/auth'
import maxHeight from '@/mixins'
export default {
  components: {},
  props: {
    value: {
      type: Object,
      default: () => Object.create({}),
    },
  },
  mixins: [maxHeight],
  data() {
    return {
      loading: false,
      isShow: true,
      isFull: true,
      fields: {},
      rules: {},
      forms: [],
      language: [],
      parents: [
        {
          id: '1d61ec1791102f45f0f52b52e2ab6b7b',
          pid: null,
          name: '建筑建材',
          code: 'jzjc',
          createTime: '2020-08-23 17:25:50',
          updateTime: '2020-08-23 17:32:34',
          childrens: [
            {
              id: 'hj',
              pid: '1d61ec1791102f45f0f52b52e2ab6b7b',
              name: '桁架',
              code: 'hj',
              createTime: '2020-08-23 17:31:04',
              updateTime: '2020-11-29 00:23:04',
            },
            {
              id: 'gj',
              pid: '1d61ec1791102f45f0f52b52e2ab6b7b',
              name: '箍筋',
              code: 'gj',
              createTime: '2020-08-23 17:30:58',
              updateTime: null,
            },
          ],
        },
        {
          id: 'ycl',
          pid: null,
          name: '农林牧渔',
          code: 'nlmy',
          createTime: '2020-08-23 17:25:50',
          updateTime: '2020-08-23 17:32:34',
          childrens: [
            {
              id: 'gj',
              pid: 'ycl',
              name: '豆类',
              code: 'dl',
              createTime: '2020-08-23 17:31:04',
              updateTime: '2020-11-29 00:23:04',
            },
            {
              id: 'gb',
              pid: 'ycl',
              name: '粮食',
              code: 'ls',
              createTime: '2020-08-23 17:30:58',
              updateTime: null,
            },
          ],
        },
      ],
    }
  },
  watch: {
    isShow: function() {
      this.$emit('input', null)
    },
  },
  created() {
    this.get(this.value.id || null)
    this.listForms()
    this.languages = getDic('language')
    const index = this.languages.findIndex((item) => item.value === '')
    this.languages.splice(index, 1)
  },
  methods: {
    onOkBtnClick() {
      this.submitForm()
    },
    listForms() {
      treeForm(0).then((res) => {
        this.forms = res
        this.forms.unshift({ id: '0', name: '一级目录' })
      })
    },
    submitForm() {
      // FcDesigner 生成的`JSON`
      const FcDesignerRule = this.$refs.designer.getRule()
      // FcDesigner 生成的`options`
      const FcDesignerOptions = this.$refs.designer.getOption()
      this.fields.content = JSON.stringify(FcDesignerRule)
      this.fields.options = JSON.stringify(FcDesignerOptions)
      saveOrUpdate(this.fields)
        .then(() => {
          this.isShow = false
          this.$parent.onSearchBtnClick()
        })
        .catch(() => {})
    },
    resetForm() {
      this.$refs['form'].resetFields()
    },
    async get(id) {
      const res = await get(id)
      this.fields = res
      if (res.content && res.options) {
        this.$refs.designer.setRule(JSON.parse(res.content))
        this.$refs.designer.setOption(JSON.parse(res.options))
      }
    },
    closePage() {
      this.isShow = false
      this.resetForm()
    },
  },
}
</script>
